<template>
  <div v-if="show">
    <vue-bpmn :editor="modelData.editor" @save="btnSave" />
  </div>
</template>
<script>
import VueBpmn from '@/components/VueBpmn'
import { getModel, modelEditorSource } from '@/api/flowable/model'

export default {
  name: 'FlowableModelEditorSource',
  components: { VueBpmn },
  data() {
    return {
      show: false,
      modelData: {
        id: undefined,
        editor: undefined
      }
    }
  },
  created() {
    const id = this.$route.params.id
    getModel(id).then(data => {
      this.modelData.editor = data.editor
      this.modelData.id = data.id
      this.show = true
    }).catch(() => {
      this.$route.go(-1)
    })
  },
  methods: {
    btnSave(xml) {
      this.modelData.editor = xml
      modelEditorSource(this.modelData)
        .then((res) => {
          this.$notify({
            title: '保存成功',
            type: 'success',
            duration: 2500
          })
        })
        .catch(err => {
          console.log(err.response.data.message)
        })
    }
  }
}
</script>
